@model cloudscribe.Core.Web.ViewModels.IpAddresses.IpAddressesViewModel
@inject IStringLocalizer<CloudscribeCore> sr

<form method="post" class="form-horizontal" role="form" asp-antiforgery="true" data-submit-once="true" asp-controller="SiteAdmin" asp-action="AddPermittedIpAddress">
    <div class="accordion" id="addNewIpAddress">
        <div class="accordion-item">
            <h2 class="accordion-header" id="ipType">
                <button class="accordion-button" type="button" aria-expanded="true">
                    IP Address Type
                </button>
            </h2>
            <div id="ipAddressType" class="accordion-collapse collapse show" aria-labelledby="ipType" data-bs-parent="#addNewIpAddress">
                <div class="accordion-body">
                    <p>Are you adding a single IP or a range of IP addresses?</p>
                    <div class="form-check">
                        <input type="radio" class="form-check-input" id="singleIpAddress" value="singleIpAddress" name="ipTypeRadio" />
                        <label class="form-check-label" for="singleIpAddress">Single IP Address</label>
                    </div>
                    <div class="form-check">
                        <input type="radio" class="form-check-input" id="ipAddressRange" value="ipAddressRange" name="ipTypeRadio" />
                        <label class="form-check-label" for="ipAddressRange">IP Address Range</label>
                    </div>
                    <button class="btn btn-secondary mt-2" type="button" data-bs-toggle="collapse" data-bs-target="#newIp" id="ipTypeNextButton" disabled aria-expanded="false" aria-controls="newIp">Next</button>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="addIp">
                <button class="accordion-button" type="button" aria-expanded="true">
                    Add New IP Address
                </button>
            </h2>
            <div id="newIp" class="accordion-collapse collapse" aria-labelledby="addIp" data-bs-parent="#addNewIpAddress">
                <div class="accordion-body">
                    <div asp-validation-summary="All" class="text-danger"></div>
                    <div class="row mb-3" id="errorMsg" style="display:none;"></div>
                    <div class="row" id="allowedIpRanges" style="display:none;">
                        <div class="col mb-3">
                            <p>The following range formats are accepted:</p>
                            <ul>
                                <li>192.168.0.0/255.255.255.0</li>
                                <li>192.168.0.10 - 192.168.10.20</li>
                                <li>192.168.10.10-20</li>
                                <li>fe80::/10</li>
                                <li>192.168.0.0/16</li>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="mb-3">
                                <label asp-for="IpAddress" class="form-label" id="addNewIpRange" style="display:none;">@sr["Permitted IP Address Range"]*</label>
                                <label asp-for="IpAddress" class="form-label" id="addNewSingleIp" style="display:none;">@sr["Permitted IP Address"]*</label>
                                <input asp-for="IpAddress" id="IpAddressNew" class="form-control" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="mb-3">
                                <label asp-for="Reason" class="form-label">@sr["Reason"]</label>
                                <input asp-for="Reason" class="form-control" />
                            </div>
                        </div>
                    </div>
                    
                    <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#ipAddressType" aria-expanded="false" aria-controls="ipAddressType" id="ipAddressEntryBackButton">Back</button>
                    <button name="submit" type="submit" id="saveNew" class="btn btn-primary" data-enabled-text='@sr["Save"]' data-disabled-text='@sr["Working..."]' disabled>@sr["Save"]</button>
                    <button type="button" name="cancel" class="btn btn-secondary" data-bs-dismiss="modal">@sr["Cancel"]</button>
                </div>
            </div>
        </div>
    </div>
</form>